<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>设备状态</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <script src="../config.js"></script>
  <style>
    body,html{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      touch-action: none;
    }
    #app{
      font-size: 0.28rem;
      background-color: #F2F2F2;
      height: 60%;
      overflow-x: hidden;
      overflow-y: auto;
    }
    p{
      color:black;
    }
    .title{
      width: 100%;
      display: flex;
      justify-content:flex-start;
      padding: 0.4rem 0;
      text-align: center;
      background-color: white;

    }
    .title-item{
      width: 33.33%;
      padding: 0.1rem 0;
    }
    .title-item:nth-child(2){
      border-left:1px solid #BBBBBB ;
      border-right:1px solid #BBBBBB ;
    }
    .smallFontSize{
      font-size:0.18rem
    }
    .tableList{
      width: 100%;
      text-align: center;
      font-size: 0.22rem;
      margin-top: 0.08rem;
      background-color: white;
    }

    .tableHeader .firstTable{
      width: 40%;
    }
    .tableList td{
      width: 20%;
      padding: 0.2rem  0;
    }
    .backGround{
      background-color: #F4F4F4;
    }
    .footer{
      text-align: center;
      width: 100%;
      font-size: 0.24rem;
      background-color: white;
      padding: 0.1rem 0;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 99;
      border-top:1px solid #BBBBBB;
    }
    .fontGray{
      color:#7D7D7D ;
    }
    .loading{
      width: 100%;
      height:100%;
      background-color: transparent;
      position: absolute;
      bottom:0.6rem;
      left: 0;
      z-index: 999;
    }
    .loading>p{
      width: 100%;
      height: 10%;
      margin-top: 90%;
      text-align: center;
      font-size: 0.24rem;
    }
    .isWH{
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color:green;
      margin-bottom: 2px;
    }

  </style>

</head>

<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js"></script>

<body>
<div id="app" class="mui-content">
  <div  class="mui-content  mui-scroll-wrapper mui-off-canvas-backdrop" style="padding-bottom: 0.6rem" >
    <div class="mui-scroll restaurant ">
      <div class="title">
        <div class="title-item">
          <p>设备总数</p>
          <p><strong>{{original.total}}</strong><span class="smallFontSize"> 台</span></p>
        </div>
        <div class="title-item">
          <p>在线</p>
          <p><strong>{{original.onLine}}</strong><span class="smallFontSize"> 台</span></p>
        </div>
        <div class="title-item">
          <p>离线</p>
          <p><strong>{{original.offLine}}</strong><span class="smallFontSize"> 台</span></p>
        </div>
      </div>
      <!--list  start -->
      <table  class="tableList" >
        <thead>
        <tr class="tableHeader">
          <td class="firstTable">门店</td>
          <td class="fontGray">设备总数</td>
          <td class="fontGray">在线</td>
          <td>离线</td>
        </tr>
        </thead>
        <tbody>
        <tr v-show="!loadingShow"   @click="toDeviceList(item)"  v-for="(item,index) in original.devicelist" :class="{backGround : index%2 === 0}" >
          <td>
            <span v-show="item.storeType === 2" class="isWH" ></span>
            {{item.storeName}}
          </td>
          <td class="fontGray">{{item.total}}</td>
          <td class="fontGray">{{item.onLine}}</td>
          <td>{{item.offLine}}</td>
        </tr>
        </tbody>
      </table>

      <!--list  end-->
      <div  v-show="loadingShow"  style="background-color: white;height: 9rem; border-top: 1px solid  #F4F4F4;"></div>
    </div>
  </div>
  <!--loading-->
  <div v-show="loadingShow" class="loading">
    <p>加载中...</p>
  </div>
</div>
<!--页尾提示 -->
<div class="footer"  >
  本列表为设备当前状态
</div>







<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        currentShopObj: {},
        storeList:[],  //门店列表
        original: {
          total:'- -',
          onLine:'- -',
          offLine:'--'
        },
        loadingShow:true
      }
    },
    created: function() {
      var vm = this
      mui.init();
      mui.plusReady(function() {
        vm.receiveParams()
        mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005});
      })
    },
    mounted: function() {

    },
    methods: {
      receiveParams: function() {
        var self = plus.webview.currentWebview();
        var vm=this
        self.shopObjs.forEach( function(item,index){
          vm.storeList.push({
            storeId:item.storeId,
            storeName:item.storeName
          })
        });
        this.loadData();

      },
      loadData: function() {
        var  vm=this
        vm.loadingShow=true
        config.ajax({
          url:'/deviceState/getOverview',
          data:vm.storeList,
          success:function(res){
//            vm.loadingShow=false
            console.log(JSON.stringify(res))
            if(res.result ===1){
              vm.original=res.data
            }else{
              mui.toast(res.errormsg)
            }
              vm.loadingShow=false

          },
          error:function(res){
            vm.loadingShow=false
            mui.toast(res.errormsg)
          }
        })
      },
      toDeviceList:function(item){
        mui.openWindow({
          url: 'seniorDeviceList.html',
          id: 'seniorDeviceList',
          styles: {
            titleNView: {
              titleText:item.storeName+'设备状态',
              titleColor: "#FFFFFF",
              titleSize: "14px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
//            storeId: vm.storeId,
//            storeName: vm.storeName,
             storeDetail:item,
             isShow:true,   //收币量显示
          }
        });
      }
    },

  })
</script>
</body>

</html>